<template>
    <view
        class="bottom-bar cart-bottom-bar"
        :class="{ 'home-cart-bottom-bar': isHome, 'home-cart-bottom-bar-iphonex': isHome && isIphoneX }">
        <checkbox-group @change="checkboxChange">
            <label class="item-radio custom-checkbox-box">
                <checkbox class="checkbox-mark" value="all" :checked="isSelectAllFn(selectData)"></checkbox>
                <custom-checkbox :isSelect="isSelectAllFn(selectData)"></custom-checkbox>
                <text class="text">全选</text>
            </label>
        </checkbox-group>

        <view class="item-mian">
            <view class="price">
                <view class="price-box">
                    <text class="price-text price-text-main">{{ totalPrice }}</text
                    ><text class="price-text small">元</text>
                </view>
            </view>
            <button
                class="btn btn-success btn-submitOrder"
                @click="goSubmitOrder"
                :disabled="productInfo.length < 1 || selectData.ids.length < 1"
                :class="{ disable: productInfo.length < 1 || selectData.ids.length < 1 }">
                去开票
            </button>
        </view>
    </view>
</template>

<script>
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    components: {
        customCheckbox,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        getUseAddress: {
            type: Object,
            default: () => {},
        },
        TakeDelivery: {
            type: Object,
            default: () => {},
        },
        productInfo: {
            type: Array,
            default: () => [],
        },

        isHome: {
            type: Boolean,
            default: false,
        },
        totalPrice: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {}
    },
    watch: {},
    created() {
        const res = uni.getSystemInfoSync()
        const { model, statusBarHeight } = res
        if (
            (model.indexOf("iPhone") > -1 && statusBarHeight > 20) ||
            model.indexOf("iPhone X") > -1 ||
            model.indexOf("iPhone 1") > -1
        ) {
            this.isIphoneX = true
        }
    },
    mounted() {},
    methods: {
        //确认清空购物车
        confirm() {
            this.close()
            this.$emit("delCart", true)
        },
        //关闭提示
        close() {
            this.$refs.tip.close()
        },

        //去开票
        goSubmitOrder() {
            let ids = this.selectData.ids
            if (ids.length > 0) {
                this.easyGoTo(
                    `/pages_me/packet/billing/creatBilling?orderIds=${ids.join(",")}&invoicePrice=${this.totalPrice}`,
                )
            } else {
                this.easyToast("请先勾选要开票的订单")
            }
        },
        //全选操作
        checkboxChange(e) {
            let values = e.detail.value
            let isAll = values.length > 0 && values[0] == "all"
            this.$emit("selectAll", isAll)
        },
        //全选是否选中
        isSelectAllFn(data) {
            let ids = data.ids
            let allPro = 0
            this.productInfo.forEach((pro) => {
                allPro += 1
            })
            let isSelectAll = ids.length > 0 && ids.length == allPro
            this.$emit("isSelectAllBack", isSelectAll)
            return isSelectAll
        },
    },
}
</script>

<style lang="scss">
.home-cart-bottom-bar {
    bottom: 54px;
}
.home-cart-bottom-bar-iphonex {
    // bottom: 74px;
}
.cart-bottom-bar {
    flex-direction: row;
    z-index: 9;

    .item-mian {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
    }

    .price {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        margin-right: 20rpx;
        .price-box {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }
        .price-text {
            font-size: $font-size-36;
            font-weight: 400;
            color: $color-red;
        }
        .price-text-main {
            font-weight: bold;
            color: $app-color-main;
        }
        .num {
            text {
                // margin-left: 10rpx;
            }
        }
        .small {
            font-size: $font-size-26;
            margin-left: 6rpx;
            margin-bottom: 6rpx;
            color: #333333;
        }
        .text-color-3 {
            font-size: 24rpx;
            color: $color-gray-3;
        }
    }
}
.btn-del-color {
    border-color: $color-gray-1;
    color: $color-gray-1;
    font-size: 28rpx;
}
.item-radio {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
        margin-left: 10rpx;
    }
}
.btn-submitOrder {
    width: 220rpx;
    height: 80rpx;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #ffffff;
}
</style>
